<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
  <title>云API</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
  <style>
    html,
    body {
      background-color: #f5f6f6;
    }

    .empty {
      margin-left: auto;
      margin-right: auto;
      width: 98%;
    }

    .doufu {
      margin-top: 5px;
    }

    .doufu li {
      width: 50%;
      float: left;
    }

    .doufu li div {
      margin: 5px;
      background-color: #fff;
      padding: 10px;
    }

    .ci {
      text-align: left;
      height: 16px;
      line-height: 16px;
    }

    .ci span {
      padding-left: 16px;
      float: right;
    }

    .shu {
      text-align: center;
      font-size: 22px;
      line-height: 30px;
      height: 30px;
      color: #1abc9c;
    }

    .hui {
      color: #555555;
      font-size: 13px;
    }

    .bimg {
      background-image: url(../image/tanhao.png);
      background-size: 16px;
      background-position: right;
      background-repeat: no-repeat;
    }

    .shangcheng {
      background-image: url(../image/shangsheng.png);
      background-size: 16px;
      background-position: left -2px;
      background-repeat: no-repeat;
      width: 24px;
    }

    .xiajiang {
      background-image: url(../image/xiajiang.png);
      background-size: 16px;
      background-position: 0%;
      background-repeat: no-repeat;
      width: 30px;
    }

    .tongjiimg {
      margin-left: auto;
      margin-right: auto;
      width: 95%;
    }

    .tongjiimg img {
      margin-top: 6px;
    }

    .wode {
      background-color: #1abc9c;
      padding: 8px 0px 8px 10px;
      /*  background-image: url(../image/setting_cell_arrow@2x.png); */
      background-size: 10px;
      /* background-position: right 15px center; */
      background-repeat: no-repeat;
    }

    .wode p:nth-child(1) {
      font-size: 18px;
    }

    .wode p {
      line-height: 25px;
      color: #fff;
    }

    .s {
      font-size: 10px;
    }

    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
 <!--  <div class="wode" onclick="openDetail('wode_window.html')">
    <p id="nbdr"></p>
    <p id="nb"></p>
  </div> -->
  <div class="empty" id="count">
    <ul class="doufu" v-cloak>
      <li>
        <div>
          <p class="bimg">
            总面积
          </p>
          <p class="shu">
            <!--   {{arr[0]}} -->
            0
          </p>
          <p class="ci hui">
            上月养护：
            <!-- {{arr[1]}} -->0
            <span
              :class="arr[0]>arr[1]?'shangcheng':arr[0]==arr[1]?'':'xiajiang'">{{(arr[0]-arr[1])/arr[1]!='Infini'?0:(arr[0]-arr[1])/arr[1]}}%</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p class="bimg">
            绿化面积
          </p>
          <p class="shu">
            <!-- {{arr[2]}} -->0</p>
          <p class="ci hui">
            上月巡查：
            <!-- {{arr[3]}} -->0
            <span
              :class="arr[2]>arr[3]?'shangcheng':arr[2]==arr[3]?'':'xiajiang'">{{(arr[2]-arr[3])/arr[3]!='Infini'?0:(arr[2]-arr[3])/arr[3]}}%</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p class="bimg">
            总账号
          </p>
          <p class="shu">
            <!--   {{arr[4]}} -->0</p>
          <p class="ci hui">
            上月病虫：
            <!-- {{arr[5]}} -->0
            <span
              :class="arr[4]>arr[5]?'shangcheng':arr[4]==arr[5]?'':'xiajiang'">{{(arr[4]-arr[5])/arr[5]!='Infini'?0:(arr[4]-arr[5])/arr[5]}}%</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p class="bimg">
            管理账号
          </p>
          <p class="shu">
            0
          </p>
          <p class="ci hui">上月用电：0 <span class="">0%</span></p>
        </div>
      </li>
    </ul>
  </div>
  <div class="tongjiimg">
    <!-- 一个折线图（逐月养护管理统计），一个柱状图（逐日用水量统计），一个并状图（养护细分统计）。
			与 建筑大学风格一样-->
    <div id="container" style="height: 200px; width: 100%; margin-top: 270px;"></div>
    <div id="container1" style="height: 200px; width: 100%;"></div>
    <!-- <div id="qufenbu_data" style="height: 200px;width: 100%;margin-top: 30px"></div> -->
  </div>
  <div class="col-md-4">
    <div class="box border lvse">
      <div class="box-title">
        <h4>
          <a>
            &nbsp;项目类表
            <!-- 未完成  --></a>
        </h4>
      </div>
      <div class="panel-body" style="background-color: #fff;">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th class="s"><i class></i> 项目名称</th>
              <th class="s"><i class></i>项目经理</th>
              <th class="s"><i class></i> 开始时间</th>
            </tr>
          </thead>
          <tbody id="ld">
            <tr v-for="(l,index) in ld">
              <td v-text="l.source"></td>
              <td v-text="l.situation"></td>
              <td v-text="l.releasetime"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--  <div class="col-md-4">
      <div class="box border lvse">
        <div class="box-title">
          <h4><a> &nbsp;养护列表 </a></h4>
        </div>
        <div class="panel-body" style="background-color: #fff;">
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="s"><i class></i> 名称</th>
                <th class="s"><i class></i>内容</th>
                <th class="s" style="width: 50px;"><i class></i> 数量</th>
                <th class="s"><i class></i> 时间</th>
              </tr>
            </thead>
            <tbody id="lds">
              <tr v-for="(ls,index) in lds">
                <td v-text="ls.greenlandmanage.codeGreenland.name"></td>
                <td v-text="ls.maintenanceContent"></td>
                <td v-text="ls.maintenanceNum"></td>
                <td v-text="ls.releasetime"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="box border lvse">
        <div class="box-title">
          <h4><a> &nbsp;日报列表 </a></h4>
        </div>
        <div class="panel-body" style="background-color: #fff;">
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="s"><i class></i> 名称</th>
                <th class="s"><i class></i>时间</th>
                <th class="s" style="width: 50px;"><i class></i> 添加人</th>
                <th class="s"><i class></i> 进度</th>
              </tr>
            </thead>
            <tbody id="ldss">
              <tr v-for="(lss,index) in ldss">
                <td v-text="lss.jhname.slice(0,5)+'...'"></td>
                <td v-text="lss.time"></td>
                <td v-text="lss.addperson"></td>
                <td v-text="lss.completion"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div> -->
</body>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    var projectid = $api.getStorage("selectpor").id;
    var user = $api.getStorage("userSession");
    var userid = $api.getStorage("userSession").data.id;
    var departName = $api.getStorage("userSession").data.enterpriseProjects
      .projectName;
    var userName = $api.getStorage("userSession").data.realName;
    $("#nbdr").text(userName);
    $("#nb").text(departName);

    var qiyeid = $api.getStorage("userSession").data.enterprise.id;
    //豆腐块
    var count = new Vue({
      el: "#count",
      data: {
        arr: [],
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "mobile/home/counts.json",
          data: {
            depart: qiyeid,
            projectid: projectid,
          },
          dataType: "json", //返回数据形式为json
          success: function (result) {
            //alert(JSON.stringify(result));
            if (result != null) {
              count.arr = result;
              for (var s = 0; s < result.length; s++) { }
            }
          },
        });
      },
    });
    //巡查
    var apps = new Vue({
      el: "#ld",
      data: {
        ld: [],
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "app/lnsecthistory/index.json",
          data: {
            projectid: projectid,
            userid: user.data.id,
          },
          dataType: "json", //返回数据形式为json
          success: function (result) {
            //alert(JSON.stringify(result));
            if (result != null) {
              for (var i = 0; i < result.length; i++) {
                //alert(result.data[i])
                apps.ld.push(result[i]);
              }
            }
          },
        });
      },
    });
    //养护
    var appss = new Vue({
      el: "#lds",
      data: {
        lds: [],
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "app/lnsecthistory/main.json",
          data: {
            projectid: projectid,
            userid: user.data.id,
          },
          dataType: "json", //返回数据形式为json
          success: function (result) {
            //alert(JSON.stringify(result));
            if (result != null) {
              for (var i = 0; i < result.length; i++) {
                //alert(result.data[i])
                appss.lds.push(result[i]);
              }
            }
          },
        });
      },
    });
    //日报
    var appsss = new Vue({
      el: "#ldss",
      data: {
        ldss: [],
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "app/lnsecthistory/xin.json",
          data: {},
          dataType: "json", //返回数据形式为json
          success: function (result) {
            //alert(JSON.stringify(result));
            if (result != null) {
              for (var i = 0; i < result.length; i++) {
                //alert(result.data[i])
                appsss.ldss.push(result[i]);
              }
            }
          },
        });
      },
    });
    dianliang(projectid);
    //bigdata_wd();
    var roleId = user.data.sysRole.sysRoleCode.id;
    $.ajax({
      url: BaseServiceUrl + "mobile/attendanceCon/admin_att_static.json",
      type: "POST",
      data: {
        roleId: roleId,
        enterpriseId: qiyeid,
      },
      dataType: "json",
      success: function (ret) {
        // alert(JSON.stringify(ret))
        var dom = document.getElementById("container1");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          color: '#5FC5A1',
          title: {
            text: '当月缺勤人数统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ret.daylist
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '缺勤',
            data: ret.worklist,
            type: 'line',
            smooth: true
          }]
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {
      }
    });
  }


  function dianliang(projectid) {
    var user = $api.getStorage("userSession");
    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/home/xuncha.json",
      data: {
        projectid: projectid,
        userid: user.data.id,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        var doms = document.getElementById("witerchart");
        var myCharts = echarts.init(doms);
        var app = {};
        option = null;
        app.title = "xxxxx";
        options = {
          color: ["#3398DB"],
          title: {
            text: "巡查逐月统计",
            left: "center",
            padding: 30,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月",
              ],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "次",
              type: "bar",
              barWidth: "60%",
              data: [
                result[0],
                result[1],
                result[2],
                result[3],
                result[4],
                result[5],
                result[6],
                result[7],
                result[8],
                result[9],
                result[10],
                result[11],
              ],
            },
          ],
        };
        if (options && typeof options === "object") {
          myCharts.setOption(options, true);
        }
      },
    });
  }
</script>

</html>